<template>
	<view class="navHeaderBox"><uni-nav-bar left-icon="back" left-text="" :right-icon="showRight?'more-filled':''" :title="title" @clickLeft="headerLeftClick" @clickRight="headerRightClick"></uni-nav-bar>
	<uni-popup ref="dialog" type="middle">
		<div
		  style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}"
		  class="menuNavBox"
		>
		  <div class="closeBox">
		    <img mode="widthFix" src="../../static/images/close-nav2.png" alt @click="closeDialog" />
		  </div>
		  <div class="menuContent">
		    <div class="menuTitle">快速导航</div>
		    <div class="menuList clearfix">
		      <navigator @click="goIndex" class="menuItem">
		        <img mode="widthFix" src="../../static/images/nav-index.png" alt />
		        <div>首页</div>
						
		      </navigator>
		      <navigator @click="goCart" class="menuItem">
		        <img mode="widthFix" src="../../static/images/nav-cart.png" alt />
		        <div>购物车</div>
		      </navigator>
		      <navigator url="/pages/search/search" class="menuItem">
		        <img mode="widthFix" src="../../static/images/nav-search.png" alt />
		        <div>搜索</div>
		      </navigator>
		      <navigator @click="goClassify" class="menuItem">
		        <img mode="widthFix" src="../../static/images/nav-cate.png" alt />
		        <div>全部分类</div>
		      </navigator>
		      <navigator @click="goMine" class="menuItem">
		        <img mode="widthFix" src="../../static/images/nav-my.png" alt />
		        <div>我的易购</div>
		      </navigator>
		    </div>
		  </div>
		</div>
		
	</uni-popup>
	</view>
</template>

<script>
export default {
	props: {
		 title: {
		          type: String,
		          default: ''
		      },
		      showRight:{
		          type: Boolean,
		          default:true
		      },
	},
	data() {
		return {

		};

	},
	methods: {
		headerLeftClick() {
			uni.navigateBack(2)
		},
		headerRightClick () {
			this.$refs.dialog.open()
		},
		closeDialog() {
			this.$refs.dialog.close()
		},
		goIndex() {uni.switchTab({url: '/pages/index/index'})},
		goCart() {uni.switchTab({url: '/pages/cart/cart'})},
		goClassify() {uni.switchTab({url: '/pages/classify/classify'})},
		goMine() {uni.switchTab({url: '/pages/mine/mine'})},
}
}
</script>

<style lang="scss">
	.navHeaderBox {
		position: sticky;
		left:0;
		right:0;
		top:0;
		z-index: 100;
	// 头部菜单弹框
	.menuNavBox {
	
		.closeBox {
			text-align: right;
			margin-top: 10rpx;
			margin-right: 30rpx;
			img {
				width: 60rpx;
			}
		}
		.menuContent {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;
			&::before {
				border-bottom: 22rpx solid #fff;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				display: block;
				content: '';
				position: absolute;
				top: -20rpx;
				right: 24rpx;
			}
			.menuTitle {
				font-size: 30rpx;
				padding: 20rpx;
				text-align: left;
			}
			.menuList {
				.menuItem {
					float: left;
					width: 23%;
					margin: 1%;
					background-color: #f7f7f7;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					text-align: center;
					img {
						width: 50%;
					}
					div {
						color: #666;
					}
					}
				}
			}
		}
	
	}
</style>
